<template>
	<view class="bank">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="添加银行卡"></tab-top>
		<!-- #endif -->
		<view class="bg_01"></view>
		<view class="set_box">
			<!-- 开户名 -->
			<view class="set_item">
				<view class="set_item_left"><text>开户名</text></view>
				<view class="set_item_reght">
					<text>{{account_name}}</text>
				</view>
			</view>
			<!-- 卡号 -->
			<view class="set_item">
				<view class="set_item_left"><text>卡号</text></view>
				<view class="set_item_reght">
					<input placeholder-style="color:#999" class="input" v-model="card_number"
					type="number" maxlength="25" minlength="12" placeholder="请填写19位银行卡号" />
				</view>
			</view>
			<!-- 银行名称 -->
			<view class="set_item" @tap="bankName">
				<view class="set_item_left">
					<text>银行名称</text>
				</view>
				<view class="set_item_reght">
					<text>{{bank_name||"选择银行"}}</text>
					<image src="/static/personal-center/right.png"></image>
				</view>
			</view>
			<!-- 支行名称 -->
			<view class="set_item">
				<view class="set_item_left"><text>支行名称</text></view>
				<view class="set_item_reght">
					<input placeholder-style="color:#999" class="input" v-model="bank_branch"
					type="text" placeholder="请填写支行名称" />
				</view>
			</view>
		</view>
		<view class="button" @tap="sub">确定</view>
		<!-- 弹窗 -->
		<jc-popUp position="bottom" ref="popx" :flag="flag" markTapHide="true">
			<view class="footer">
				<view class="item">请选择银行</view>
				<view class="item" @tap="total('中国邮政储蓄银行')">中国邮政储蓄银行</view>
				<view class="item" @tap="total('中国工商银行')">中国工商银行</view>
				<view class="item" @tap="total('中国农业银行')">中国农业银行</view>
				<view class="item" @tap="total('中国建设银行')">中国建设银行</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
export default {
	data() {
		return{
			account_name:'',
			card_number:'',
			bank_branch:'',
			bank_name:''
		}
	},
	onLoad(e) {
		if (e.auth == 1) {
			this.account_name = e.name
			return;
		}
		if (e.auth == 0) {
			this.showToast('请先个人认证！');
		}
		if (e.auth == 2) {
			this.showToast('个人认证审核中！');
		}
		if (e.auth == 3) {
			this.showToast('审核失败！');
		}
		setTimeout(() => {
			uni.navigateBack();
		}, 1000)	
	},
	methods: {
		bankName() {
			this.$refs.popx.show();
		},
		total(e){
			if(!e){
				this.$refs.popx.hide();
				return;
			}
			this.bank_name = e
			this.$refs.popx.hide();
		},
		sub(){
			this.getReq({
				url:'user/bank_info',
				method:'POST',
				data:{
					account_name:this.account_name,
					card_number:this.card_number,
					bank_name:this.bank_name,
					bank_branch:this.bank_branch,
					user_id:this.isLogin().id
				}
			}).then(res=>{
				if(res[0] || res[1].data.status == 0){
					this.showToast('请稍后重试');
					return;
				}
				this.showToast(res[1].data.title);
				setTimeout(()=>{
					uni.navigateBack();
				},1500)
			})
		}
	},
	components: {
		jcPopUp
	}
};
</script>

<style scoped lang="scss">
.bank {
	.set_box {
		width: 702upx;
		padding: 0 24upx;
		.set_item {
			font-size: 28upx;
			height: 98upx;
			border-bottom: 1upx solid #e5e5e5;
			line-height: 98upx;
			display: flex;
			justify-content: space-between;
			.set_item_left {
				font-size: 28upx;
			}
			.set_item_reght {
				font-size: 28upx;
				color: #999999;
				display: flex;
				align-items: center;
				.input[type] {
					width: 500upx;
					margin-left: 40upx;
					line-height: 98upx;
					text-align: right;
				}
				.yz {
					width: 26upx;
					height: 26upx;
					margin-left: 10upx;
					line-height: 26upx;
				}
				image {
					width: 12upx;
					height: 22upx;
					margin-left: 12upx;
				}
			}
		}
	}
	.button {
		margin: 0 auto;
		margin-top: 260upx;
		width: 540upx;
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		text-align: center;
		line-height: 90upx;
		color: #fff;
	}
	.bg_01 {
		width: 750upx;
		height: 30upx;
		background-color: #f0f0f0;
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-last-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
			box-sizing: content-box;
		}
	}
}
</style>
